import React, { useState } from 'react';
import { Settings, Users, Building2, Plus, Edit2, Trash2, Search } from 'lucide-react';

interface Admin {
  id: string;
  name: string;
  account: string;
  role: string;
  status: 'active' | 'inactive';
  lastLogin?: string;
  createdAt: string;
}

interface District {
  id: string;
  name: string;
  address: string;
  guardCount: number;
  isActive: boolean;
}

export const SystemManagement: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'admins' | 'districts'>('admins');
  const [searchTerm, setSearchTerm] = useState('');
  
  // Mock data for admins
  const [admins, setAdmins] = useState<Admin[]>([
    {
      id: 'A001',
      name: '李管理员',
      account: 'admin01',
      role: '内网管理员',
      status: 'active',
      lastLogin: '2024-12-01 15:30:00',
      createdAt: '2024-10-01 09:00:00'
    },
    {
      id: 'A002',
      name: '王管理员',
      account: 'admin02',
      role: '内网管理员',
      status: 'inactive',
      createdAt: '2024-11-15 14:20:00'
    }
  ]);

  // Mock data for districts
  const [districts, setDistricts] = useState<District[]>([
    {
      id: 'D001',
      name: '东区',
      address: '医院东门区域',
      guardCount: 3,
      isActive: true
    },
    {
      id: 'D002',
      name: '西区',
      address: '医院西门区域',
      guardCount: 2,
      isActive: true
    },
    {
      id: 'D003',
      name: '南区',
      address: '医院南门区域',
      guardCount: 2,
      isActive: true
    },
    {
      id: 'D004',
      name: '北区',
      address: '医院北门区域',
      guardCount: 1,
      isActive: false
    }
  ]);

  const [showAddModal, setShowAddModal] = useState(false);
  const [modalType, setModalType] = useState<'admin' | 'district'>('admin');

  const filteredAdmins = admins.filter(admin => 
    admin.name.includes(searchTerm) || admin.account.includes(searchTerm)
  );

  const filteredDistricts = districts.filter(district =>
    district.name.includes(searchTerm) || district.address.includes(searchTerm)
  );

  const handleToggleAdminStatus = (id: string) => {
    setAdmins(admins.map(admin =>
      admin.id === id
        ? { ...admin, status: admin.status === 'active' ? 'inactive' : 'active' }
        : admin
    ));
  };

  const handleToggleDistrictStatus = (id: string) => {
    setDistricts(districts.map(district =>
      district.id === id
        ? { ...district, isActive: !district.isActive }
        : district
    ));
  };

  const handleDeleteAdmin = (id: string) => {
    if (confirm('确认删除该管理员账号？')) {
      setAdmins(admins.filter(admin => admin.id !== id));
    }
  };

  const handleDeleteDistrict = (id: string) => {
    if (confirm('确认删除该院区？注意：删除院区会影响相关门卫的权限分配。')) {
      setDistricts(districts.filter(district => district.id !== id));
    }
  };

  const openAddModal = (type: 'admin' | 'district') => {
    setModalType(type);
    setShowAddModal(true);
  };

  return (
    <div className="max-w-7xl mx-auto">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">系统管理</h2>
              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                管理系统管理员账号和院区配置
              </p>
            </div>
          </div>

          {/* Tab navigation */}
          <div className="mt-4">
            <div className="border-b border-gray-200 dark:border-gray-700">
              <nav className="-mb-px flex space-x-8">
                <button
                  onClick={() => setActiveTab('admins')}
                  className={`py-2 px-1 border-b-2 font-medium text-sm ${
                    activeTab === 'admins'
                      ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
                  }`}
                >
                  <Users className="h-4 w-4 inline mr-2" />
                  管理员管理
                </button>
                <button
                  onClick={() => setActiveTab('districts')}
                  className={`py-2 px-1 border-b-2 font-medium text-sm ${
                    activeTab === 'districts'
                      ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
                  }`}
                >
                  <Building2 className="h-4 w-4 inline mr-2" />
                  院区管理
                </button>
              </nav>
            </div>
          </div>
        </div>

        <div className="p-6">
          {/* Search and add button */}
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
            <div className="flex-1 relative">
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center">
                <Search className="h-5 w-5 text-gray-400" />
              </div>
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                placeholder={activeTab === 'admins' ? '搜索管理员姓名或账号...' : '搜索院区名称或地址...'}
              />
            </div>
            <button
              onClick={() => openAddModal(activeTab)}
              className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
            >
              <Plus className="h-4 w-4 mr-2" />
              {activeTab === 'admins' ? '添加管理员' : '添加院区'}
            </button>
          </div>

          {/* Content based on active tab */}
          {activeTab === 'admins' ? (
            // Admins list
            <div className="space-y-4">
              {filteredAdmins.map((admin) => (
                <div key={admin.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
                  <div className="flex items-start justify-between">
                    <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <div className="flex items-center mb-2">
                          <span className="font-medium text-gray-900 dark:text-white text-lg">
                            {admin.name}
                          </span>
                          <span className={`ml-3 px-2 py-1 text-xs rounded-full ${
                            admin.status === 'active'
                              ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                              : 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
                          }`}>
                            {admin.status === 'active' ? '启用' : '禁用'}
                          </span>
                        </div>
                        <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">
                          账号：{admin.account}
                        </p>
                        <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">
                          角色：{admin.role}
                        </p>
                        <p className="text-sm text-gray-600 dark:text-gray-400">
                          创建时间：{admin.createdAt}
                        </p>
                      </div>
                      
                      <div>
                        {admin.lastLogin && (
                          <p className="text-sm text-gray-600 dark:text-gray-400">
                            最后登录：{admin.lastLogin}
                          </p>
                        )}
                      </div>
                    </div>

                    <div className="flex items-center space-x-2 ml-4">
                      <button
                        onClick={() => {}}
                        className="p-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors"
                        title="编辑"
                      >
                        <Edit2 className="h-4 w-4" />
                      </button>
                      <button
                        onClick={() => handleToggleAdminStatus(admin.id)}
                        className={`p-2 rounded transition-colors ${
                          admin.status === 'active'
                            ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20'
                            : 'text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20'
                        }`}
                        title={admin.status === 'active' ? '禁用账号' : '启用账号'}
                      >
                        <Settings className="h-4 w-4" />
                      </button>
                      <button
                        onClick={() => handleDeleteAdmin(admin.id)}
                        className="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
                        title="删除账号"
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            // Districts list
            <div className="space-y-4">
              {filteredDistricts.map((district) => (
                <div key={district.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
                  <div className="flex items-start justify-between">
                    <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <div className="flex items-center mb-2">
                          <span className="font-medium text-gray-900 dark:text-white text-lg">
                            {district.name}
                          </span>
                          <span className={`ml-3 px-2 py-1 text-xs rounded-full ${
                            district.isActive
                              ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                              : 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
                          }`}>
                            {district.isActive ? '启用' : '禁用'}
                          </span>
                        </div>
                        <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">
                          地址：{district.address}
                        </p>
                        <p className="text-sm text-gray-600 dark:text-gray-400">
                          门卫数量：{district.guardCount} 人
                        </p>
                      </div>
                    </div>

                    <div className="flex items-center space-x-2 ml-4">
                      <button
                        onClick={() => {}}
                        className="p-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors"
                        title="编辑"
                      >
                        <Edit2 className="h-4 w-4" />
                      </button>
                      <button
                        onClick={() => handleToggleDistrictStatus(district.id)}
                        className={`p-2 rounded transition-colors ${
                          district.isActive
                            ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20'
                            : 'text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20'
                        }`}
                        title={district.isActive ? '禁用院区' : '启用院区'}
                      >
                        <Building2 className="h-4 w-4" />
                      </button>
                      <button
                        onClick={() => handleDeleteDistrict(district.id)}
                        className="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
                        title="删除院区"
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Add Modal */}
      {showAddModal && (
        <div className="fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-50">
          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md mx-4">
            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
              {modalType === 'admin' ? '添加管理员账号' : '添加院区'}
            </h3>
            
            <form className="space-y-4">
              {modalType === 'admin' ? (
                <>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      姓名
                    </label>
                    <input
                      type="text"
                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                      placeholder="请输入管理员姓名"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      账号
                    </label>
                    <input
                      type="text"
                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                      placeholder="请输入登录账号"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      初始密码
                    </label>
                    <input
                      type="password"
                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                      placeholder="请设置初始密码"
                    />
                  </div>
                </>
              ) : (
                <>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      院区名称
                    </label>
                    <input
                      type="text"
                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                      placeholder="请输入院区名称"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      院区地址
                    </label>
                    <input
                      type="text"
                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                      placeholder="请输入院区地址描述"
                    />
                  </div>
                </>
              )}

              <div className="flex space-x-3 pt-4">
                <button
                  type="button"
                  onClick={() => setShowAddModal(false)}
                  className="flex-1 px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-600 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
                >
                  取消
                </button>
                <button
                  type="submit"
                  className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
                >
                  添加
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};